// option
// {
// 	el:"#swiper",
// 	imgs:['img/1.png','img/2.png','img/3.png']
// }
var style =document.createElement('style')
style.innerHTML = `
*{
				margin: 0;
				padding: 0;
			}
			.lb{
				width: 1200px;
				height: 340px;
				margin: auto;
				position: relative;
			}
			img:nth-child(1){
				width: 1200px;
				height: 340px;
				background-size: 100% 100%;
				display: block;
			}
			img:nth-child(2){
				width: 1200px;
				height: 340px;
				background-size: 100% 100%;
				display: none;
			}
			img:nth-child(3){
				width: 1200px;
				height: 340px;
				background-size: 100% 100%;
				display: none;
			}
			
			.left{
				position: absolute;
				width: 80px;
				height: 80px;
				background-color: rgba(0,0,0,0.5);
				top: 110px;
				font-size: 80px;
				color: #fff;
				line-height: 70px;
				text-align: center;
				cursor: pointer;
				display: none;
			}
			.right{
				position: absolute;
				width: 80px;
				height: 80px;
				background-color: rgba(0,0,0,0.5);
				right: 0px;
				top: 110px;
				font-size: 80px;
				color: #fff;
				line-height: 70px;
				text-align: center;
				cursor: pointer;
				display: none;
			}
			.bottom{
				width: 1200px;
				height: 50px;
				position: absolute;
				bottom: 0px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			.bottom .cirle{
				width: 20px;
				height: 20px;
				background-color: black;
				border-radius: 50%;
				margin: 10px;
				cursor: pointer;
			}
			.bottom .active{
				background-color: #0000FF;
			}
`
document.body.appendChild(style)
 function wxSwiper(options){
		var swiperElement = document.querySelector(options.el)
		swiperElement.classList.add('lb')
		//设定swiperElement的宽高
		swiperElement.style.width = options.width + 'px';
		swiperElement.style.height = options.height + 'px';
		
		var img1 = document.createElement('img')
		var img2 = document.createElement('img')
		var img3 = document.createElement('img')
		
		img1.src='./img/1.png'
		img2.src='./img/2.png'
		img3.src='./img/3.png'
		
		swiperElement.appendChild(img1)
		swiperElement.appendChild(img2)
		swiperElement.appendChild(img3)
		
		
		var left = document.createElement('div')
		left.className = 'left'
		left.innerHTML = '<'
		swiperElement.appendChild(left)
		
		var right = document.createElement('div')
		right.className = 'right'
		right.innerHTML = '>'
		swiperElement.appendChild(right)
		
		var index = 0
		var cirleList = document.createElement('div')
		cirleList.className = 'bottom'
		options.imgs.forEach(function(item,i){
			var circle = document.createElement('div')
			circle.setAttribute('data-index',i)
			circle.style.backgroundColor= i==index? '#0000FF':' '
			circle.className = 'cirle'
			cirleList.appendChild(circle)
		})
		swiperElement.appendChild(cirleList)
		
		var lb = document.querySelector('.lb')
		var nextBtn = document.querySelector('.right')
		var upBtn = document.querySelector('.left')
		lb.addEventListener('mouseenter',function(){
			nextBtn.style.display='block'
			upBtn.style.display='block'
			clearInterval(intervalId)
		})
		lb.addEventListener('mouseleave',function(){
			nextBtn.style.display='none'
			upBtn.style.display='none'
			intervalId = setInterval(function(){
				nextBtn.click()
			},3000)
		})
		var imgArr = document.querySelectorAll('img')
		var cirArr = document.querySelectorAll('.cirle')
		isClick = true
		nextBtn.onclick = function(event){
			if(isClick){
				isClick = false
				setTimeout(function(){
					isClick = true
				},800)
			imgArr[index].style.display = 'none';
			cirArr[index].style.backgroundColor = 'black'
			index++;
			if(index>imgArr.length-1){
				index=0
			} 
			imgArr[index].style.display='block'
			cirArr[index].style.backgroundColor = 'blue'
			}
		}
		upBtn.onclick = function(){
			if(isClick){
				isClick = false
				setTimeout(function(){
					isClick = true
				},800)
			imgArr[index].style.display = 'none';
			cirArr[index].style.backgroundColor = 'black'
			index--;
			if(index<0){
				index=imgArr.length-1
			} 
			imgArr[index].style.display='block'
			cirArr[index].style.backgroundColor = 'blue'
			}
		}
		
		cirleList.onclick = function(event){
			if(event.target.className == 'cirle'){
				console.log(event.target)
				console.log(event.target.getAttribute('data-index'))
				console.log(event.target.dataset.index)
				imgArr[index].style.display = 'none';
				cirArr[index].style.backgroundColor = 'black'
				index = parseInt(event.target.dataset.index)
				imgArr[index].style.display='block'
				cirArr[index].style.backgroundColor = 'blue'
			}
		}
		
		var intervalId = setInterval(function(){
			nextBtn.click()
		},3000)
}